<template>
    <i class="gzg-icon" :class="'icon-' + name" :style="style"></i>
</template>
<script lang="ts" setup>
import { computed } from 'vue'
import { addUnit } from '../../utils/style'

import type { CSSProperties } from 'vue'

const props = defineProps<{
    name:string,
    size?:string | number | 16,
    color?:string
}>();

const style = computed<CSSProperties>(() => {
    const {size, color} = props
    const style:CSSProperties = {}
    if (!size && !color) return style
    style.fontSize = addUnit(size)
    style.color = color
    return style
})

</script>